<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>练习录音统计</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/style/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/icon.css">

<link href="<%=path %>/plugins/ligerUI/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/plugins/ligerUI/lib/ligerUI/skins/Gray/css/grid.css" rel="stylesheet" type="text/css">

    <script src="<%=path %>/plugins/ligerUI/lib/ligerUI/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path %>/script/common.js"></script>
<style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
</style>
</head>
<body>
     <div style="width:100%;padding-top:5px;padding-bottom:35px;display:none">
        <div style="float:left;">
           <form id="sform" action="<%=path %>/statistics/down_student_record" method="post">
		           录音日期：
		        	<input type="text" name="lyDate" id="ly_date" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" style="width:113px"/> -  
		        	<input type="text" name="lyDate_end" id="ly_date_end" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" style="width:113px"/>  
		            &nbsp;&nbsp;
		           学生ID：<input id="sid" name="stuId" type="text"   style="width:50px">&nbsp;&nbsp;
		           学生昵称：<input id="sname" name="stuName" type="text"   style="width:100px">&nbsp;&nbsp;
		           教师昵称：<input id="tname" name="teacherName" type="text"   style="width:100px">&nbsp;&nbsp;
		            录音渠道：<select id="ly_source" name="lySource" class="easyui-combobox" panelHeight="auto" style="width:auto" data-options="editable:false "> 
		                <option value="" selected="selected">全部</option>
		                <option value="1">app</option>
		                <option value="2">web</option>
		            </select>
		            &nbsp;&nbsp;
		            <a href="javascript:void(0);" class="easyui-linkbutton c6" iconCls="icon-search" style="width: 90px" onclick="searchData();">Search</a>
		    </form>
        </div>
        <div style="float:right;">
		   <a href="javascript:document.getElementById('sform').submit();" class="easyui-linkbutton c6" iconCls="icon-redo" style="width: 90px">导出</a>
        </div>
     </div>
       
      <div id="img_wait" style="height:1120px;width:100%;text-align:center;background-color:#e7ebf2;">
         <img src="<%=path %>/style/images/loading2.gif" style="position:absolute;top:50%;left:50%;"  />
      </div>
      <div id="maingrid4" style="margin:0; padding:0"></div>
</body>




    <script src="<%=path %>/plugins/ligerUI/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="<%=path %>/plugins/ligerUI/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script type="text/javascript" src="<%=path %>/plugins/audio/audio.min.js"></script>
    
   
    <script type="text/javascript">
        $.ligerui.defaults.Grid.headerRowHeight = 30;
        var teacherName = '${username}';
        $(function(){
        	//音频播放设置
            audiojs.events.ready(function() {
                audiojs.createAll();
            });
        	
        	
        	//加载数据
        	loadData(teacherName) ;
        	
        });
        
        //加载数据
        function loadData(teacherName,stuId,stuName,lyDate,lyDate_end,lySource){
        	var p = '' ;
        	if(teacherName){
        		p+='teacherName='+teacherName+"&";
        	}
        	if(stuId){
        		p+='stuId='+stuId+"&";
        	}
        	if(stuName){
        	    p+='stuName='+stuName+"&";
        	}
        	if(lyDate){
        		p+='lyDate='+lyDate+"&";
        	}
        	if(lyDate_end){
        		p+='lyDate_end='+lyDate_end+'&' ;
        	}
        	if(lySource){
        		p+='lySource='+lySource+"&";
        	}
        	$.ajax({
        		type: 'get' ,
        		url : '<%=path %>/practice/audio/list' ,
        		data: p ,
        		success:function(json){
        			var data = eval('('+json+')');
        			showData(data) ;
        			$("#img_wait").css('display','none');
        		},
        		error:function(){
        			alert('加载失败');
        		}
        	});
        }
        
        //显示数据
        function showData(data){
        	 window['g'] =
                 g = $("#maingrid4").ligerGrid({
                     columns: [
                      { display: 'ID', name: 'id', minWidth: 60, width: 10 },
                     { display: '学生昵称', name: 'userName', minWidth: 60, width: 230 },
                     { display: '录音文件', name: 'audioUrl', minWidth: 80, width: 300 },
                     { display: '题号', name: 'questionNum', minWidth: 60, width: 230 },
                     { display: '题干', name: 'content', minWidth: 60, width: 230 },
                     {display:'状态',width:100,
	        			render:function(item,index){
	        				if(item.status==3){
	        					return "已批改" ;
	        				}else if(item.status==2){
	        					return "待批改" ;
	        				}else if(item.status==1){
	        					return "上传中" ;
	        				}
	        		}
	        		},
	        		{display:'创建时间',width: 200,render:function(item,index){
	        		return Common.DateFormatterTime(item.createTime);
	        		} } ,
                     ], pageSize:30,
                     allowHideColumn: true,
                     onAfterShowData:urlToFlash,
                     data: data,
                     width: '100%', 
                     height: 1100
                 });
                 $("#pageloading").hide();
        }
        //音频路径转为插件
        function urlToFlash(){
        	$("td").each(function(){
        		var _id = $(this).attr('id') ;
        		if(_id.indexOf('c103')!=-1){
        			var _url = $(this).find("div").text();
        			if(_url.length>0 && $(this).parent().attr('id')){
        				
	        			var _audio = '<audio controls="controls" style="width: 280px;height:29px;"><source src="'+_url+'" type="audio/mpeg"><embed height="45" type="audio/mpeg" width="705" src="'+_url+'" volume="0" autostart="false" loop="-1"></audio>' ;
	        			$(this).find("div").empty().append(_audio);
        			}
        		}
        	});
        }
        //根据条件查询信息
        function searchData(){
        	$("#img_wait").css('display','block');
        	$(".l-bar-btnfirst").click();
             var lyDate = $("#ly_date").val() ,
                 lyDate_end = $("#ly_date_end").val(),
                 stuId = $("#sid").val() ,
                 stuName = $("#sname").val() ,
                 teacherName = $("#tname").val() ,
                 lySource = $("#ly_source").combobox("getValue");
             
             loadData(teacherName,stuId,stuName,lyDate,lyDate_end,lySource) ;
        }
        
        
    </script>
</html>